import React from 'react'
import { NavLink } from 'react-router-dom'
import { connect } from 'react-redux'
import BattleItem from './BattleItem.tsx'

const mapStateToProps = (state) => {
  return {
    userInfo: state.app.userInfo
  }
}
class WatchCodeShow extends React.Component<any, any> {
  public constructor(props) {
    super(props)
    this.state = {
      roomNo: 1,
      combatList: [],
      loading: false,
      isShowQrcode: false,
      qrcodeUrl: '',
      qrcodeNickname: '',
      lftid: 0
    }
  }

  public componentDidMount() {
    console.log(this.props.match.params)
    const {roomNo} = this.props.match.params
    this.setState({roomNo})
    this.queryBattles(roomNo)
  }

  queryBattles(roomNo) {
    const url = `${config.pre}/recordCenter/roomNo/${roomNo}`
    const opt = { method: 'GET' }
    this.setState({loading: true})
    fetchJson(url, opt).then(data => {
      this.setState({loading: false})
      if (data.result) {
        this.setState({combatList: []})
        return
      }
      const {combatList, roombatList} = data.data.dataList[0]
      const zipResult = _.zipWith(combatList, roombatList, (c, r) => ({...c, ...r}))
      console.log(zipResult)
      this.setState({combatList: zipResult})
    })
  }

  closeQrcode() {
    this.setState({
      isShowQrcode: false
    })
  }

  showQrcodeItem(value) {
    let body = {
      uid: value.uid
    };
    console.log(value, 'value')
    var token = Cookies.get('token')
    var areaCode = Cookies.get('areaCode')
    var url = `${config.pre}/personalCenter/payQr/show`;
    var opt = {
      method: 'POST',
      headers: { Authorization: token, AreaCode: areaCode, 'Content-Type': 'application/json;charset=utf-8' },
      body: JSON.stringify(body)
    };
    fetch(url, opt).then(res => res.json()).then(data => {
      console.log('data', data)
      if (data.result === 0) {
        let url = data.data;
        if (window.location.href.match('10.10.10')) {
          url = url.replace('http://127.0.0.1:8080', 'https://lefantian.jiahuagame.com');
        }
        this.setState({
          qrcodeUrl: url,
          isShowQrcode: true,
          qrcodeNickname: value.nickName
        });
      } else {
        alert(value.nickName + '没有上传收款码.');
      }
    })
  }

  public render() {
    const { inviteId, tip, period, combatList, loading, showRoundRelplay, isShowQrcode, qrcodeUrl, lftid } = this.state
    return <div className="view-page battle-view">
      <div className="detail-middle noTop">
        <div className="watch-code-top"></div>
        <div className="content">
          <div className="info full-height">
            {
              combatList.map((battle, index) => (<BattleItem  showQrcode={this.showQrcodeItem.bind(this)} data={battle} key={index}></BattleItem>))
            }
            {
              combatList.length === 0 && !loading ? <div className="empty-tip">暂无记录</div> : null
            }
          </div>
        </div>
      </div>
      <div className="usercenter-bottom">
        <img className="bar" src="img/userCenter/watchcode-bottom.png" alt=""/>
        <img className="user-bottom-bg" src="img/userCenter/user-bottom-bg.png" alt=""/>
        <img onClick={() => window.history.go(-1)} className="back" src="img/app/back.png" alt="" />
      </div>

      {
        isShowQrcode ? <div className="app-qrcode-dialog-wrapper">
          <div className="qrcode-dialog">
            <div className="description">{this.state.qrcodeNickname}的收款二维码</div>
            <img onClick={this.closeQrcode.bind(this)} className="qrcode-close" src="img/createGame/close-btn.png" alt="" />
            <div className="upload-qrcode">
              <img src={qrcodeUrl} alt="" />
            </div>
            <div className="upload-actions">
            </div>
          </div>
        </div> : null
      }
    </div>
  }

}

export default connect(mapStateToProps)(WatchCodeShow)